/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this
work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the
"License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * *
http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is
distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific
language governing permissions and * limitations under the License. */
/* eslint-disable */
<template>
  <m-list-construction title="运营概览">
    <template slot="content">
      <!-- 第一行 -->
      <el-row class="top">
        <el-col :span="8">
          <div class="top-item">
            <countCard
              title="收入统计"
              linkTitle="收入明细"
              :cost="totalInfo.incomeTotal"
              :Ratio="totalInfo.incomeRatio"
            ></countCard>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top-item">
            <countCard
              title="支出统计"
              linkTitle="支出明细"
              :cost="totalInfo.expensesTotal"
              :Ratio="totalInfo.expensesRatio"
            ></countCard>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top-item">
            <rankCard
              title="每日任务金额top3"
              type="sum"
              :dataList="top3"
            ></rankCard>
          </div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row class="center">
        <el-col :span="12">
          <div class="center-item">
            <div class="lineChart">
              <div class="lineChart_content">
                <div class="header">
                  <span class="header-ns">收入趋势图</span>
                  <el-date-picker
                    v-model="inComeDate"
                    size="mini"
                    type="monthrange"
                    range-separator="-"
                    :disabled="false"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    value-format="yyyy-MM"
                    @change="incomeChange"
                    popper-class="monthrange"
                  >
                  </el-date-picker>
                </div>
                <div class="chart-inner">
                  <TrendChart
                    :xAxisData="incomeInfo.xAxisData"
                    :yAxisData="incomeInfo.yAxisData"
                    labelTitle='收入'
                  ></TrendChart>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="center-item">
            <div class="lineChart">
              <div class="lineChart_content">
                <div class="header">
                  <span class="header-ns">消费趋势图</span>
                  <el-date-picker
                    v-model="expensesDate"
                    size="mini"
                    type="monthrange"
                    range-separator="-"
                    :disabled="false"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    value-format="yyyy-MM"
                    @change="expensesChange"
                    popper-class="monthrange"
                  >
                  </el-date-picker>
                </div>
                <div class="chart-inner">
                  <TrendChart
                    :xAxisData="expensesInfo.xAxisData"
                    :yAxisData="expensesInfo.yAxisData"
                    labelTitle='消费'
                  ></TrendChart>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row class="bottom">
        <el-col
          :span="24"
          style="margin-top: 20px;margin-bottom: 20px"
        >
          <div class="bottom-item">
            <div class="pieChart">
              <div class="pieChart_content">
                <div class="header">
                  <span class="header-ns">资源消费分布</span>
                  <el-date-picker
                    v-model="resourceDate"
                    size="mini"
                    type="monthrange"
                    range-separator="-"
                    :disabled="false"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    value-format="yyyy-MM"
                    @change="resourceChange"
                    popper-class="monthrange"
                  >
                  </el-date-picker>
                </div>
                <div class="pieList">
                  <div class="left">
                    <expenseTaskPie
                      text="100%"
                      :seriesData="consumptionInfo.leftData"
                      textTitle="金额"
                    />
                  </div>
                  <div class="right">
                    <expenseTaskPie
                      text="100%"
                      :seriesData="consumptionInfo.rightData"
                      textTitle="数量"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </template>
  </m-list-construction>
</template>
<script>
  import { queryTotalList, queryChartbyYear, queryCountProductOrder, queryOrderTop3 } from '@/conf/home/apis'
  import TrendChart from './components/TrendChart'
  import expenseTaskPie from './components/expenseTaskPie.vue'
  import rankCard from './components/rankCard.vue'
  import countCard from './components/countCard.vue'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import _ from 'lodash'
  export default {
    name: 'operationalOverview',
    data () {
      /* 获取近一年年月 */
      let myDate = new Date()
      let currentY = myDate.getFullYear()
      let currentM = myDate.getMonth() + 1
      let month = currentM - 11
      let startM = month <= 0 ? 12 + month : month
      let startY = month <= 0 ? currentY - 1 : currentY
      return {
        inComeDate: [`${startY}-${startM < 10 ? '0' + startM : startM}`, `${currentY}-${currentM < 10 ? '0' + currentM : currentM}`],
        expensesDate: [`${startY}-${startM < 10 ? '0' + startM : startM}`, `${currentY}-${currentM < 10 ? '0' + currentM : currentM}`],
        resourceDate: [`${startY}-${startM < 10 ? '0' + startM : startM}`, `${currentY}-${currentM < 10 ? '0' + currentM : currentM}`],
        totalInfo: {},
        incomeInfo: {
          xAxisData: [],
          yAxisData: [],
        },
        expensesInfo: {
          xAxisData: [],
          yAxisData: [],
        },
        consumptionInfo: {
          leftData: [],
          rightData: []
        },
        top3: []
      }
    },
    components: { mListConstruction, countCard, rankCard, TrendChart, expenseTaskPie },
    methods: {
      incomeChange (item) {
        this.getIncome(item)
      },
      expensesChange (item) {
        this.getExpenses(item)
      },
      resourceChange (item) {
        this.getConsumptionInfo(item)
      },
      async getOrderTop3 () {
        try {
          const res = await queryOrderTop3()
          if (res && res.success) {
            this.top3 = res.data.map(item => {
              return {
                name: item.title,
                num: item.value
              }
            })
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.warning(error.msg)
          console.log('err==>', error)
        }
      },
      async getConsumptionInfo (arr) {
        const params1 = {
          startDate: arr[0],
          endDate: arr[1],
          type: 0
        }
        const params2 = {
          startDate: arr[0],
          endDate: arr[1],
          type: 1
        }
        Promise.all([queryCountProductOrder(params1), queryCountProductOrder(params2)])
          .then(([leftData, rightData]) => {
            const left = leftData.data.map(v => {
              return {
                name: v.title,
                subName: v.title === '任务资源金额' ? '任务订单 (元)' : '模型订单 (元)',
                value: v.value
              }
            })
            this.$set(this.consumptionInfo, 'leftData', left)
            const right = rightData.data.map(v => {
              return {
                name: v.title,
                subName: '调度任务 (个)',
                value: v.value
              }
            })
            this.$set(this.consumptionInfo, 'rightData', right)
          })
          .catch(([leftData, rightData]) => {
            console.log(leftData, rightData)
          })
      },
      async getTotal () {
        try {
          const res = await queryTotalList()
          if (res && res.success) {
            this.totalInfo = res.data
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.warning(error.msg)
          console.log('err==>', error)
        }
      },
      /* billType 1收入 0支出 */
      async getIncome (arr) {
        let params = {
          billType: 1,
          startDate: arr[0],
          endDate: arr[1]
        }
        try {
          const res = await queryChartbyYear(params)
          if (res && res.success) {
            const { data } = res
            let arr = []
            Object.keys(data).forEach((key) => {
              arr.push(
                {
                  key,
                  value: data[key]
                }
              )
            })
            const cData = _.cloneDeep(arr).sort((a, b) => new Date(a.key).getTime() - new Date(b.key).getTime())
            this.incomeInfo.xAxisData = cData.map(v => v.key)
            this.incomeInfo.yAxisData = cData.map(v => v.value)
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.warning(error.msg)
          console.log('err==>', error)
        }
      },
      async getExpenses (arr) {
        let params = {
          billType: 0,
          startDate: arr[0],
          endDate: arr[1]
        }
        try {
          const res = await queryChartbyYear(params)
          if (res && res.success) {
            const { data } = res
            let arr = []
            Object.keys(data).forEach((key) => {
              arr.push(
                {
                  key,
                  value: data[key]
                }
              )
            })
            const cData = _.cloneDeep(arr).sort((a, b) => new Date(a.key).getTime() - new Date(b.key).getTime())
            this.expensesInfo.xAxisData = cData.map(v => v.key)
            this.expensesInfo.yAxisData = cData.map(v => v.value)
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.warning(error.msg)
          console.log('err==>', error)
        }
      },
      init () {
        this.getTotal()
        this.getOrderTop3()
        this.getIncome(this.inComeDate)
        this.getExpenses(this.expensesDate)
        this.getConsumptionInfo(this.resourceDate)
      }
    },
    mounted () {
      this.init()
    }
  }
</script>

<style lang="scss" scoped>
.top {
  .top-item {
    background: #fff;
    border-radius: 8px;
    position: relative;
    margin: 0 10px;
    margin-top: 20px;
    height: 240px;
  }
}
.center {
  margin-top: 20px;
  .center-item {
    background: #fff;
    border-radius: 8px;
    margin: 0 10px;
    padding-top: 20px;
    height: 320px;
    .lineChart {
      // margin-top: 20px;
      // margin-bottom: 20px;
      .lineChart_content {
        padding-bottom: 20px;
        border-radius: 8px;
        .header {
          display: flex;
          justify-content: space-between;
          padding-right: 10px;
          &-ns {
            margin-left: 20px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            text-align: LEFT;
            color: #333;
          }
        }
      }
    }
    .chart-inner {
      margin-top: 0px;
    }
  }
}
.bottom {
  height: 340px;
  .bottom-item {
    background: #fff;
    border-radius: 8px;
    margin: 0 10px;
    height: 300px;
    .pieChart {
      .pieChart_content {
        padding-top: 10px;
        .header {
          display: flex;
          justify-content: space-between;
          padding-right: 10px;
          margin-bottom: 20px;
          &-ns {
            margin-left: 20px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            text-align: LEFT;
            color: #333;
          }
        }
        .pieList {
          height: 230px;
          display: flex;
          justify-content: space-between;
          .left {
            width: 50%;
            height: 100%;
            .gray {
              margin-right: 0 !important;
            }
          }
          .right {
            width: 50%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" >
.monthrange {
  .el-month-table td.end-date .cell,
  .el-month-table td.start-date .cell {
    background-color: rgba(122, 119, 213, 0.4) !important;
  }
}
</style>
